<!DOCTYPE html>
<html>
<head>
    <title> 树表</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../resources/css/plugins/ztree/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.css"/>
    <script type="text/javascript" src="../../resources/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="../../resources/js/plugins/ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: setRemoveBtn,
                showRenameBtn: setRenameBtn
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
        function zTreeOnClick(event, treeId, treeNode) {
            var cont=treeNode.src;
            $('iframe').attr('src',cont)
        };
        function setRemoveBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        function setRenameBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        var zNodes =[
            { id:1, pId:0, name:"公众号", open:true,},
            { id:11, pId:1, name:"广州标准化研究院",src:'../bootstrap-table-develop/bootstrapTab.html'},
            { id:12, pId:1, name:"广州正全",src:'../bootstrap-fileinput/fileinput.html'}, ,
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
        };
        $(function(){
            var ifh=document.getElementsByTagName('iframe')[0];
            ifh.height=document.documentElement.clientHeight-100;
        })
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
    </script>
</head>

<body>
<div class="content_wrap col-md-3 col-xs-3 col-sm-3">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<iframe class="col-md-9 col-sm-9 col-xs-9" src="menu.html" width="100%" frameborder="0"></iframe>
</body>
</html>